<template>
  <a-drawer
    :width="800"
    :visible="visible"
    title="同住人"
    :maskClosable="true"
    @close="onClose"
    :bodyStyle="{ height: 'calc(100% - 110px)' }"
  >
    <div class="content">
      <a-table
        v-if="dataList.length"
        :columns="columns"
        :pagination="false"
        rowKey="id"
        size="small"
        bordered
        :dataSource="dataList"
      >
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key === 'name'">
            <a-input
              v-if="record.edit"
              placeholder="请输入"
              v-model:value="record.name"
            />
            <span v-else> {{ record.name }} </span>
          </template>
          <template v-if="column.key === 'phone'">
            <a-input
              v-if="record.edit"
              placeholder="请输入"
              v-model:value="record.phone"
            />
            <span v-else> {{ record.phone }} </span>
          </template>
          <template v-if="column.key === 'action'">
            <a-space>
              <a-button type="link" @click="onEdit(record)"> 编辑 </a-button>
              <a-button type="link" @click="onRemove(index)"> 删除 </a-button>
            </a-space>
          </template>
        </template>
      </a-table>

      <a-button
        type="dashed"
        @click="onAdd"
        style="width: 100%; margin-top: 10px"
      >
        <template #icon>
          <PlusOutlined />
        </template>
        添加
      </a-button>
    </div>
    <div class="drawer-footer">
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button type="primary" @click="onSave">保存</a-button>
      </a-space>
    </div>

    <!-- 添加同住人 -->
    <AddInmate
      :visible="addVisible"
      :info="editInfo"
      @addCancel="addCancel"
      @add="handleAdd"
      @edit="handleEdit"
    />
  </a-drawer>
</template>
<script>
import { defineComponent, reactive, toRefs, watch } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import AddInmate from "@/components/contract/NewContract/modules/AddInmate.vue";
import _ from "lodash";
export default defineComponent({
  name: "OwnerUsers",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  components: { PlusOutlined, AddInmate },
  setup(props, { emit }) {
    let count = 0;

    const state = reactive({
      columns,
      dataList: [],
      addVisible: false,
      editInfo: {},
    });

    const onSave = () => {
      let list = _.cloneDeep(state.dataList);
      list = list.map((v) => {
        delete v.id;
        return v;
      });
      emit("success", { list });
    };

    const onRemove = (index) => {
      state.dataList.splice(index, 1);
    };

    const onEdit = (record) => {
      state.editInfo = { ...record };
      state.addVisible = true;
    };

    // 添加同住人信息
    const onAdd = () => {
      state.addVisible = true;
    };

    const addCancel = () => {
      state.addVisible = false;
      state.editInfo = {};
    };

    const handleAdd = (info) => {
      state.dataList.push({
        id: count++,
        ...info,
      });
      addCancel();
    };

    const handleEdit = (info) => {
      state.dataList = state.dataList.map((v) => {
        if (v.id == info.id) {
          v = { ...info };
        }
        return v;
      });
      addCancel();
    };

    const onClose = () => {
      emit("cancel");
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          state.dataList = props.list.map((item) => ({
            ...item,
            id: count++,
          }));
          if (!state.dataList?.length) {
            onAdd();
          }
        } else {
          count = 0;
          state.dataList = [];
        }
      }
    );
    return {
      ...toRefs(state),
      onClose,
      onRemove,
      onAdd,
      onSave,
      onEdit,
      addCancel,
      handleAdd,
      handleEdit,
    };
  },
});
const columns = [
  {
    dataIndex: "name",
    key: "name",
    title: "姓名",
  },
  {
    dataIndex: "phone",
    key: "phone",
    title: "电话",
  },
  {
    dataIndex: "idcard",
    title: "证件号码",
    key: "idcard",
  },
  {
    dataIndex: "id",
    key: "action",
    title: "操作",
  },
];
</script>
